{% if section_pages %}
    <nav class="sidebar-nav section-nav">
        <h3>In this section</h3>
        <ul class="vertical menu">
            {% for section_page in section_pages %}
                <li class="{% if section_page.is_active %}is-active{% endif %}">
                    <a href="{{section_page.url}}">{{ section_page.title }}</a>
                </li>
            {% endfor %}
        </ul>
    </nav>
{% endif %}
{% if article_headings %}
    <div data-sticky-container>
        <div class="sticky" data-sticky data-sticky-on="large" data-margin-top="3" data-top-anchor="on-this-page:top" data-btm-anchor="main-end:bottom">
            <nav class="sidebar-nav article-nav">
                <h3 id="on-this-page">On this page</h3>
                <ul class="vertical menu" data-magellan data-bar-offset="60">
                    {% for heading in article_headings %}
                        <li>
                            <a href="#{{heading.value|slugify}}">{{heading.value}}</a>
                            {% if heading.children %}
                                <ul>
                                    {% for subheading in heading.children %}
                                        <li><a href="#{{subheading|slugify}}">{{subheading}}</a></li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </div>
{% endif %}
